<template>
  <el-card shadow="never">
    <div slot="header">视频设置</div>
    <el-form
      :model="formData"
      :rules="rules"
      ref="settingForm"
      label-width="80px"
    >
      <el-form-item label="封面上传" prop="image">
        <el-upload
          :action="uploadApi"
          list-type="picture-card"
          :auto-upload="true"
          :file-list="formConfig.uploadFile.list"
          name="upload"
          drag
          :limit="formConfig.uploadFile.limit"
          :on-success="onUploadChange"
          :on-exceed="onUploadExceed"
          :on-remove="onUploadRemove"
          :headers="uploadHeaders"
          :on-error="onUploadError"
          accept=".jpg,.png,.jpeg"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">建议 750*400</div>
        </el-upload>
      </el-form-item>

      <el-form-item label="视频" prop="video">
        <el-upload
          :action="uploadApi"
          name="upload"
          :on-success="onUploadVideoChange"
          :limit="formConfig.uploadVideo.limit"
          :on-exceed="onUploadVideoExceed"
          :file-list="formConfig.uploadVideo.list"
          :on-progress="onUploadProgress"
          :on-error="onUploadError"
          accept=".mp4"
          :headers="uploadHeaders"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">支持 mp4 文件</div>
        </el-upload>
      </el-form-item>

      <el-form-item label="自动播放" prop="autoplay">
        <el-switch v-model="formConfig.uploadVideo.autoplay"> </el-switch>
      </el-form-item>

      <el-form-item label="循环播放" prop="loop">
        <el-switch v-model="formConfig.uploadVideo.loop"> </el-switch>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import { getToken } from '@/utils/auth'
const token = getToken()
const Authorization = `Bearer ${token}`

export default {
  name: 'VideoSetting',
  filters: {},
  props: {
    formData: {
      type: Object,
      default: function () {
        return {}
      },
    },
    formConfig: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      uploadApi: `${process.env.VUE_APP_BASE_HOST}upload/cloud`,
      uploadHeaders: {
        Authorization,
      },
      rules: {
        name: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          {
            min: 5,
            max: 15,
            message: '长度在 5 到 15 个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  watch: {
    'formConfig.uploadVideo.loop': function (val) {
      const { componentId } = this.formConfig
      this.formData.components.forEach((v) => {
        if (v.id === componentId) {
          v.loop = val
        }
      })
    },
    'formConfig.uploadVideo.autoplay': function (val) {
      const { componentId } = this.formConfig
      this.formData.components.forEach((v) => {
        if (v.id === componentId) {
          v.autoplay = val
        }
      })
    },
  },
  created() {},
  methods: {
    // 文件上传添加
    onUploadChange(res) {
      const { url, filename } = res

      const { componentId } = this.formConfig
      this.formData.components.forEach((v) => {
        if (v.id === componentId) {
          v.url = url
          v.urlList = [{ name: filename, url }]
        }
      })
    },
    // 超出文件
    onUploadExceed() {
      this.$message({
        message: '抱歉，只能上传一张图片',
        type: 'error',
      })
    },
    // 移除
    onUploadRemove() {
      const { componentId } = this.formConfig

      this.formData.components.forEach((v) => {
        if (v.id === componentId) {
          v.url = ''
          v.urlList = []
        }
      })
    },
    onUploadProgress(event, file, fileList) {
      console.log('event, file, fileList', event, file, fileList)
    },
    async onUploadError(err) {
      if (err.status) {
        this.$message({
          message: '超时，请重新登录',
          type: 'error',
        })

        await this.$store.dispatch('user/logout')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        return
      }

      this.$message({
        message: '上传失败，请重试',
        type: 'error',
      })
    },

    // 视频上传添加
    onUploadVideoChange(res) {
      const { url, filename } = res

      const { componentId } = this.formConfig

      this.formData.components.forEach((v) => {
        if (v.id === componentId) {
          v.videoUrl = url
          v.videoList = [{ name: filename, url }]
        }
      })
    },
    // 超出文件
    onUploadVideoExceed() {
      this.$message({
        message: '抱歉，只能上传一个文件',
        type: 'error',
      })
    },
    // 移除
    onUploadVideoRemove() {
      const { componentId } = this.formConfig

      this.formData.components.forEach((v) => {
        if (v.id === componentId) {
          v.videoUrl = ''
          v.videoList = []
        }
      })
    },
  },
}
</script>
